import { FC } from 'react';
import styles from './infoCard.module.less';
import getStatusClazz from '@/utils/getStatusClazz';

interface IInfoCardProps {
  status?: number;
  height?: number;
  [key: string]: any;
  style?: Record<string, string | number>;
}

const InfoCard: FC<IInfoCardProps> = (props) => {
  const { status, height: _height, style: _style } = props;
  const height = _height || 77;
  const style = _style || {};

  const statusClazz = getStatusClazz(status, [0]);

  const InfoCardInner = () => {
    if (!status) {
      return (
        <div className={styles.minerRightWrap} style={style}>
          {props.children}
        </div>
      );
    } else {
      return (
        <>
          <div
            className={`${styles.minerLeftStatusBg} ${statusClazz + '-bg'}`}
          ></div>
          <div
            className={`${styles.minerRightWrap} ${
              statusClazz ? styles.hasStatus : ''
            }`}
          >
            {props.children}
          </div>
        </>
      );
    }

    return props.children;
  };
  return (
    <div
      className={`${styles.infoCard}`}
      {...props}
      style={{ height: height + 'px' }}
    >
      {InfoCardInner()}
    </div>
  );
};

export default InfoCard;
